
<template>
  <!-- 列表 -->
  <view v-if="fellowshipLists.length > 0">
    <view
      class="list flex column"
      v-for="(item, index) in fellowshipLists"
      :key="index"
      @click="goTittleDetal(item.id)"
    >
      <view class="list_tittle flex items">
        <!-- tittleShow = false不展示 -->
        <view class="image" v-if="tittleShow">
          <image :src="item.avatar" alt="" />
        </view>
        <view class="info flex column" v-if="tittleShow">
          <view class="info_tittle">
            <span v-if="item.medal" style="color: #fd273f">{{ item.title }}</span>
            <span v-else>{{ item.nickname }}</span>
            <image :src="item.medal" alt="" v-if="item.medal" />
          </view>

          <view class="info_text" v-if="tittleShow">
            <span style="margin-top: 16rpx; display: inline-block">{{ item.unid }}</span>
            <span style="margin-left: 16rpx; margin-top: 16rpx; display: inline-block">{{ item.lonetime }}</span>
          </view>
        </view>
        <view class="info flex items justify-between" v-else>
          <view class="info_tittle ellipsis-1" style="width: 480rpx">
            <span>{{ item.title }}</span>
          </view>
          <view class="info_text" style="margin-right: 34rpx">
            <span style="display: inline-block; flex: 1">{{ item.lonetime }}</span>
          </view>
        </view>
        <view class="focus" v-if="Number(uuid) != Number(item.user_id)">
          <view v-if="tittleShow">
            <image
              src="../../assets/images/wgz.png"
              alt=""
              v-if="item.is_follow == 0"
              @click.stop="guanzhu(item.user_id)"
            />
            <image
              src="../../assets/images/ygz.png"
              alt=""
              v-if="item.is_follow == 1"
              @click.stop="guanzhu(item.user_id)"
            />
            <image
              src="../../assets/images/hx.png"
              alt=""
              v-if="item.is_follow == 2"
              @click.stop="guanzhu(item.user_id)"
            />
          </view>

          <view class="edit" v-else>
            <image src="../../assets/images/edit.png" alt="" @click.stop="deleteInfoList(item.id)" />
            <view class="shanchu" v-if="item.options" @click.stop="fellowshipEdit(item.id)">
              <span>删除</span>
            </view>
          </view>
        </view>
      </view>
      <!-- 标签 -->
      <scroll-view scroll-x :enhanced="true" :show-scrollbar="false" class="popular-test-points-types">
        <!-- <view class="list_label"> -->
        <!-- <u-tag
            class="u_tag"
            v-for="(gitem, gindex) in item.liet"
            :key="gindex"
            :text="gitem.name"
            plain
            shape="circle"
            icon="pushpin"
            size="mini"
            borderColor="#306EFF"
          ></u-tag> -->
        <view class="u_tag" v-for="(gitem, gindex) in item.tag_name" :key="gindex">
          <view class="flex items">
            <image src="../../assets/images/biaoqian.png" alt="" />
            <!-- <span>#</span> -->
            <span>{{ gitem }}</span>
          </view>
        </view>
        <!-- </view> -->
      </scroll-view>
      <view class="list_text ellipsis-4">
        {{ item.descript }}
      </view>
      <!-- 是否显示照片 -->
      <view class="list_photo" v-if="item.images.length > 0">
        <image v-for="(titem, tindex) in item.images.slice(0, 3)" :key="tindex" :src="titem" alt="" />
        <view v-if="item.images.length >=3" class="morephoto">
          <image src="../../assets/images/morephoto.png" alt="" />
          <span>{{ Number(item.images_num) }}+</span>
        </view>
      </view>
      <view class="list_interactive flex items justify-between align-center">
        <view class="ax" @click.stop="dianzan(item.id)">
          <image src="../../assets/images/oneye.png" v-if="item.is_goods == 1" />
          <image src="../../assets/images/eye2x.png" alt="" v-else />

          <span>{{ item.goods_num }}</span>
        </view>
        <view class="pl" @click.stop="goTittleDetal(item.id)">
          <image src="../../assets/images/plblack.png" alt="" />
          <span>{{ item.commont_num }}</span>
        </view>
        <view class="sc" @click.stop="shoucang(item.id)">
          <image src="../../assets/images/onsc.png" v-if="item.is_collect == 1" />

          <image src="../../assets/images/sc.png" alt="" v-else />
          <span>{{ item.collect_num }}</span>
        </view>
      </view>
    </view>

    <u-loadmore
      :loading-text="moreListInfo.loadingText"
      :status="moreListInfo.status"
      :nomore-text="moreListInfo.nomoreText"
    />
  </view>
  <view v-else class="nocontent"> 暂无相关内容</view>
</template>
<script setup>
import { defineEmits } from "vue";
import medal from "../../assets/images/medal.png";
import focus from "../../assets/images/focus.png";
import edit from "../../assets/images/edit.png";

//接受我的父组件传过来的值
const props = defineProps({
  tittleShow: {
    type: Boolean,
    default: true
  },
  dianzanType: {
    type: Boolean,
    default: true
  },
  fellowshipLists: {
    type: Array,
    default: true
  },
  moreList: {
    type: Number,
    default: true
  },
  userinfo: {
    type: String,
    default: true
  }
});
const uuid = ref(uni.getStorageSync("uuid"));
console.log("uuid", uuid);

//加载更多
const moreListInfo = ref({
  status: "nomore",
  loadingText: "努力加载中",
  nomoreText: "你已经达到我的底线了"
});

// # 定义要发送的emit事件
const emit = defineEmits(["fellowshipChange", "dianzanEdit", "shoucangEdit", "guanzhuEdit", "optionsDle"]);
//删除论团文章
const fellowshipEdit = (id) => {
  emit("fellowshipChange", id);
  console.log("id", id);
};

//点赞
const dianzan = (id) => {
  emit("dianzanEdit", id);
};
//收藏
const shoucang = (id) => {
  emit("shoucangEdit", id);
};
const guanzhu = (id) => {
  emit("guanzhuEdit", id);
};
//打开删除按钮
const deleteInfoList = (id) => {
  emit("optionsDle", id);
};

//list列表
const list = ref([]);
//点击事件去详情
const goTittleDetal = (id) => {
  uni.navigateTo({
    // url:`/pagesA/home/seek-detail/id?=${id}`
    url: "/pagesA/home/seek-detail?id=" + id
    // uni.navigateTo({ url: "/pagesB/collections/mycollections" });
  });
};
</script>

<style lang="scss" scoped>
.list {
  // height: 584rpx;
  background: #ffffff;
  border-radius: 0rpx 0rpx 0rpx 0rpx;
  // border: 1px solid red;
  width: 100%;
  margin-top: 12rpx;
  padding: 24rpx 32rpx;
  box-sizing: border-box;
  .list_tittle {
    // height: 94rpx;
    border-radius: 0rpx 0rpx 0rpx 0rpx;
    // border: 1rpx solid green;
    .image {
      width: 92rpx;
      height: 92rpx;
      margin-right: 16rpx;
      image {
        height: 100%;
        width: 100%;
        border-radius: 50%;
      }
    }
    .info {
      flex: 1;
      // border: 1rpx solid yellow;
      // margin-left: 16rpx;
      .info_tittle {
        display: flex;
        align-items: center;
        span {
          font-size: 32rpx;
          font-family: PingFang SC-Bold, PingFang SC;
          font-weight: bold;
          color: rgba(0, 0, 0, 0.87);
          line-height: 38rpx;
          margin-right: 8rpx;
        }
        image {
          height: 42rpx;
          width: 42rpx;
        }
      }
      .info_text {
        display: inline-block;
        font-size: 24rpx;
        font-family: PingFang SC-Medium, PingFang SC;
        font-weight: 500;
        color: rgba(0, 0, 0, 0.38);
        line-height: 28rpx;
        // margin-top: 16rpx;
      }
    }
    .focus {
      // width: 36rpx;
      // height: 36rpx;
      margin-top: 4rpx;
      // border: 1rpx solid red;
      .edit {
        // border: 1rpx solid green;
        width: 60rpx;
        height: 60rpx;
        margin-left: -28rpx;
        position: relative;
        .shanchu {
          position: absolute;
          width: 128rpx;
          height: 80rpx;
          background: #ffffff;
          box-shadow: 0rpx 8rpx 8rpx 0rpx rgba(0, 0, 0, 0.06);
          border-radius: 16rpx 16rpx 16rpx 16rpx;
          opacity: 1;
          right: 0rpx;
          // top: 20rpx;
          display: flex;
          align-items: center;
          justify-content: center;
          span {
            display: inline-block;
            width: 104rpx;
            height: 56rpx;
            line-height: 56rpx;
            border-radius: 20rpx 20rpx 20rpx 20rpx;
            opacity: 1;
            border: 2rpx solid #e84026;
            text-align: center;
            font-size: 28rpx;
            font-family: PingFang SC-Medium, PingFang SC;
            font-weight: 500;
            color: #e84026;
            z-index: 99999;
          }
        }
        image {
          height: 100%;
          width: 100%;
        }
      }
      image {
        width: 36rpx;
        height: 36rpx;
        // border: 1rpx solid red;
      }
    }
  }
  // .list_label {
  //   height: 42rpx;
  //   border-radius: 0rpx 0rpx 0rpx 0rpx;
  //   opacity: 1;
  //   margin-top: 14rpx;
  // display: flex;
  // align-items: center;
  .popular-test-points-types {
    white-space: nowrap;
    margin-top: 20rpx;
    .u_tag {
      margin-right: 12rpx;
      padding: 4rpx 12rpx;
      // height: 36rpx;
      border-radius: 44rpx 44rpx 44rpx 44rpx;
      opacity: 1;
      border: 2rpx solid #306eff;
      // display: flex;
      display: inline-block;
      align-items: center;
      justify-content: center;
      // border: 1rpx solid red;
      // padding: 4rpx 10rpx;
      image {
        height: 30rpx;
        width: 30rpx;
      }
      span {
        font-size: 24rpx;
        font-family: PingFang SC-Medium, PingFang SC;
        font-weight: 400;
        color: #306eff;
        line-height: 28rpx;
      }
    }
  }
  // }
  .list_text {
    font-size: 24rpx;
    font-family: PingFang SC-Medium, PingFang SC;
    font-weight: 500;
    color: rgba(0, 0, 0, 0.6);
    line-height: 36rpx;
    margin-top: 16rpx;
    margin-bottom: 12rpx;
  }
  .list_photo {
    // height: 218rpx;
    width: 100%;
    display: flex;
    justify-content: flex-start;
    position: relative;
    image {
      width: 218rpx;
      height: 218rpx;
      background: #d9d9d9;
      border-radius: 12rpx 12rpx 12rpx 12rpx;
    }
    image:nth-child(2n) {
      margin: 0 16rpx;
    }
    .morephoto {
      width: 218rpx;
      height: 218rpx;
      position: absolute;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      right: 0;
      image {
        height: 48rpx;
        width: 48rpx;
        background-color: rgba(0, 0, 0, 0);
      }
      span {
        font-size: 24rpx;
        font-family: HarmonyOS Sans-Regular, HarmonyOS Sans;
        font-weight: 400;
        color: #ffffff;
        line-height: 38rpx;
      }
    }
  }
  .list_interactive {
    margin-top: 12rpx;
    height: 88rpx;
    border-radius: 0rpx 0rpx 0rpx 0rpx;
    opacity: 1;
    border-top: 1rpx solid rgba(0, 0, 0, 0.06);
    .ax {
      display: flex;
      align-items: center;
      image {
        height: 40rpx;
        width: 40rpx;
      }
      span {
        margin-left: 8rpx;
        font-size: 24rpx;
        font-family: HarmonyOS Sans-Regular, HarmonyOS Sans;
        font-weight: 400;
        color: rgba(0, 0, 0, 0.87);
      }
    }
    .pl {
      display: flex;
      align-items: center;
      image {
        height: 40rpx;
        width: 40rpx;
      }
      span {
        margin-left: 8rpx;
        font-size: 24rpx;
        font-family: HarmonyOS Sans-Regular, HarmonyOS Sans;
        font-weight: 400;
        color: rgba(0, 0, 0, 0.87);
      }
    }
    .sc {
      display: flex;
      align-items: center;
      image {
        height: 40rpx;
        width: 40rpx;
      }
      span {
        margin-left: 8rpx;
        font-size: 24rpx;
        font-family: HarmonyOS Sans-Regular, HarmonyOS Sans;
        font-weight: 400;
        color: rgba(0, 0, 0, 0.87);
      }
    }
  }
}
</style>
